<template>
  <view class="tips">
    <image class="img" src="@/static/images/alert_icon.png" mode="widthFix"></image>
    <view> 如未找到合适的选项，可输入车辆类型后保存使用；选择和输入项只可选择一种。 </view>
  </view>

  <ve-form class="vehicle-type">
    <h3 class="vehicle-type__title">选择中无适合的可输入</h3>
    <ve-card>
      <ve-form-item label="车辆类型">
        <ve-input v-model.trim="driverCarType" placeholder="请输入" :maxlength="99" />
      </ve-form-item>
    </ve-card>
    <h3 class="vehicle-type__title">选择中有适合的可选择</h3>
    <template v-if="dict?.driverCarTypeList && dict.driverCarTypeList.length">
      <template v-for="(item, index) in dict.driverCarTypeList" :key="index">
        <view @click="chooseCarTypeItem(item)" class="vehicle-type__value">{{ item.label }}</view>
        <view style="height: 38rpx" v-if="index == dict.driverCarTypeList.length - 1"></view>
      </template>
    </template>
    <ve-empty text="没有数据~" v-else></ve-empty>
    <ve-bottom-box>
      <ve-button type="primary" :disabled="isCarTypeEmpty" size="long" @click="submitFn">确 认</ve-button>
    </ve-bottom-box>
  </ve-form>
</template>
<script setup lang="ts">
  import { ref, computed, getCurrentInstance, nextTick } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'

  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('carManagerToListDict')
  let eventChannel: any
  const _this = getCurrentInstance().proxy

  // 车辆类型
  const driverCarType = ref()
  // 输入框的值是否为空
  const isCarTypeEmpty = computed(() => !driverCarType.value)
  // 选择车辆类型
  const chooseCarTypeItem = (item: any) => {
    eventChannel.emit('onConfirm', item.label)
    uni.navigateBack()
  }
  // 输入文本提交
  const submitFn = () => {
    eventChannel.emit('onConfirm', driverCarType.value)
    uni.navigateBack()
  }
  onLoad(async () => {
    await nextTick()
    if (!_this) return
    eventChannel = _this.getOpenerEventChannel()
  })
</script>
<style lang="less" scoped>
  .vehicle-type {
    height: auto;
    min-height: 100%;
    padding: 24rpx 24rpx 48rpx;
    background: #f7f8fa;
    &__title {
      margin-bottom: 16rpx;
    }
    &__value {
      padding: 32rpx;
      background: #fff;
      margin-bottom: 24rpx;
    }
  }
  .tips {
    position: relative;
    display: flex;
    align-items: baseline;
    width: 100%;
    background: #e8f3ff;
    font-weight: 400;
    font-size: 24rpx;
    color: #1e1e1e;
    padding: 24rpx 14rpx 24rpx 64rpx;
    .img {
      position: absolute;
      top: 30rpx;
      left: 24rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
</style>
